<template>
	<view class="page">
		<image src="//image.tocj1314.com/046558e5860f45abb0e8836b56a932b7.png" mode="widthFix" style="width: 100%;"
			@load="load"></image>
		<view class="rule" v-if="showBtn">
			<text class="tex" @click="showRuleDetail()">规则详情></text>
		</view>
		<image src="//image.tocj1314.com/28698872aeeb4788b3189f666cb8c1a8.png" mode="widthFix" style="width: 100%;"
			@load="load"></image>
		<view class="btns acea-row row-around" v-if="showBtn">
			<navigator class="down" url="/pages/users/user_spread_code/index" hover-class="none">下载邀请海报</navigator>
			<button class="invite" open-type="share">
				<navigator url="/pages/users/user_spread_code/index" hover-class="none">立即邀请</navigator>
			</button>
		</view>
		<view class="popup" :class="showRule?'show':''">
			<view class="title acea-row row-between">
				<view>
					规则详情
				</view>
				<view class="close" @click="closeRuleDetail()">
					✕
				</view>
			</view>
			<view>
				1、当您的好友通过您的邀请链接进入小程序商城，第一次下单12包精力羹，且线下完成付款，您将获得108元现金奖励；第一次下单600包精力羹，且线下完成付款，您将获得5400元现金奖励。<text>您可获需以上奖励的前提要求是，您必须是健康行者或健康辅导师,才可获得以上好友首购奖励。</text>您的奖励将在当月月底30号或31号由客服统计好，于第二个月5个工作口内发放，若您有疑问，请联系客服。
			</view>
			<view>
				2、您的好友复购精力羹，您可获得直接复购奖励2元/包，间接复购奖励1元/包，直接复购奖励是指您直接推荐的好友复购；间接复购奖励是指您直接推荐的好友又直接推荐了他的好友。
				他直接推荐的好友复购，您可得间接复购奖励。如：您推荐A购买了精力羹，A又推荐了B购买了精力羹，则A复购精力羹您可获得2元/包的直接复购奖励，B复购精力羹您可获得1元/
				包的间接复购奖励。<text>您可获得以上奖励的前提要求是，您当月必须自己复购12包，才可获得以上好友复购奖励.</text>您的奖励将在当月月底30号或31号由客服统计好，于第二个月5个工作日内发放，若您有疑问，请联系客服。
			</view>
		</view>
		<authorize @onLoadFun="onLoadFun" :isAuto="isAuto" :isShowAuth="isShowAuth" @authColse="authColse"></authorize>
	</view>
</template>

<script>
	import {
		mapGetters
	} from 'vuex';
	import {
		getUserInfo
	} from '@/api/user.js';
	import authorize from '@/components/Authorize';

	export default {
		components: {
			authorize
		},
		computed: mapGetters(['isLogin']),
		data() {
			return {
				userInfo: {},
				showBtn: false,
				showRule: false,
				isAuto: false, //没有授权的不会自动授权
				isShowAuth: false //是否隐藏授权
			};
		},
		onLoad() {
			if (this.isLogin) {
				this.isShowAuth = false;
				this.getUserInfo();
			} else {
				this.isAuto = true;
				this.$set(this, 'isShowAuth', true);
			}
		},
		/**
		 * 用户点击右上角分享
		 */
		onShareAppMessage: function() {
			return {
				title: '发现一家好店铺，分享给你～',
				path: '/pages/index/index?spid=' + this.$store.getters.uid || '',
				imageUrl: "http://image.tocj1314.com/0746056800564c178edcc3c9bfdf0be2.png"
			};
		},
		methods: {
			load: function(e) {
				this.showBtn = true;
			},
			/**
			 * 获取个人用户信息
			 */
			getUserInfo: function() {
				let that = this;
				getUserInfo().then(res => {
					that.userInfo = res.data;
					that.$store.commit('SETUID', res.data.uid);
				});
			},
			// 授权关闭
			authColse: function(e) {
				this.isShowAuth = e;
			},
			// 授权回调
			onLoadFun() {
				this.getUserInfo();
			},
			showRuleDetail() {
				this.showRule = true;
			},
			closeRuleDetail() {
				this.showRule = false;
			}
		}
	};
</script>
<style scoped lang="scss">
	.page {
		font-size: 0;
	}

	.rule {
		padding-bottom: 40rpx;
		text-align: center;
		background-color: #a00000;

		.tex {
			border-radius: 20rpx;
			padding: 8rpx 16rpx;
			font-size: 24rpx;
			color: #ffa604;
			background-color: #ff960050;
		}
	}

	.btns {
		margin-top: -10rpx;
		padding: 20rpx 10rpx 50rpx;
		background-color: #a00000;

		.down {
			padding: 10rpx;
			width: 216rpx;
			text-align: center;
			border-radius: 20rpx;
			border: solid 1px #fff;
			font-size: 28rpx;
			color: #fff;
		}

		.invite {
			padding: 10rpx;
			width: 240rpx;
			border-radius: 20rpx;
			text-align: center;
			font-size: 28rpx;
			color: #a00000;
			background-color: #ffa604;
		}
	}

	.popup {
		position: fixed;
		bottom: -100%;
		opacity: 0;
		padding: 24rpx;
		width: 100%;
		font-size: 28rpx;
		background-color: #fff;
		transition: all .5s;

		.title {
			margin: 0;
			font-size: 34rpx;
			font-weight: bold;

			.close {
				padding: 0 20rpx;
			}
		}

		view {
			margin: 16rpx 0;

			text {
				font-weight: bold;
			}
		}
	}

	.popup.show {
		bottom: 0;
		opacity: 1;
	}
</style>
